<!-- this handles the automatic toc. use ## for subheads to auto-generate the on-page minitoc. if you use html tags, you must supply an ID for the heading element in order for it to appear in the minitoc. -->
<script>
  $(document).ready(function () {
    // Handler for .ready() called.

    const $toc = $('#toc-sidebar');

    $toc.toc({
      minimumHeaders: 2,
      title: '',
      listType: 'ul',
      showSpeed: 'none',
      headers: '.docs h2,.docs h3',
      classes: {
        list: 'toc-sidebar',
        item: 'toc-sidebar__item',
        link: 'toc-sidebar__item-link'
      }
    });

    $toc.on('click', 'a', function () {
      const target = decodeURI($(this).attr('href'));

      $('html, body').animate({
        scrollTop: $(target).offset().top - 105
      }, 300);
    });

    if (!$.trim($toc.html())) {
      $toc.hide();
    }

    const sectionClasses = '.post-content h2, .post-content h3';
    const sections = $(sectionClasses);
    const visibleOffset = 20;
    const nav = $('.toc-sidebar');
    const navHeight = $('.header').outerHeight();

    $(window).on('scroll', function () {
      const currentPosition = $(this).scrollTop();

      sections.each(function () {
        const top = $(this).offset().top - navHeight - visibleOffset;
        let bottom = top + $(this).outerHeight();
        const nextElement = $(this).nextAll(sectionClasses).first();

        if (nextElement && nextElement.length > 0) {
          bottom = $(nextElement).offset().top - navHeight - visibleOffset;
        }

        if (currentPosition >= top && currentPosition <= bottom) {
          nav.find('a').removeClass('active');
          sections.removeClass('active');

          $(this).addClass('active');
          nav.find('a[href="#' + encodeURI($(this).attr('id')) + '"]').addClass('active');
        }
      });
    });
  });

</script>

<div class="sidebar__wrapper-inner">
  <div id="toc-sidebar"></div>
</div>
